<template>
	<view>
		<!-- 实习圈页面 -->
		<u-navbar :is-back="false" title="实习圈"></u-navbar>
		<view class="wrap">
			<view class="u-tabs-box">
				<u-tabs-swiper
					activeColor="#f29100"
					ref="tabs"
					:list="list"
					:current="current"
					@change="change"
					:is-scroll="false"
					swiperWidth="750"
				></u-tabs-swiper>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<!-- 下面的几个swiper-item代表的是上面的tabs有几个 -->
				<!-- 问大家 -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="anonymousReachBottom">
						<view class="bgship"></view>

						<ask :askList="[]"></ask>

						<u-loadmore
							:status="loadStatus[load]"
							bgColor="#f2f2f2"
							:load-text="loadText"
							@loadmore="anonymousReachBottom"
						></u-loadmore>
					</scroll-view>
				</swiper-item>
				<!-- 加油站 -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="cheerReachBottom">
						<!-- 这里是加油站上面的那一张背景图片，现在只能是默认的一张图，后面可能会增加对图片的修改接口 -->
						<view class="bgship">
							<u-swiper :list="bannerList" :title="true" height="400"></u-swiper>
							<u-avatar :src="user.avatar" size="90" mode="square" class="avatar-ship" @click="myMoment"></u-avatar>
						</view>
						<view class="remind-message" v-if="remind > 0" @click="remindInterface">
							<u-icon name="chat" color="#2979ff" size="40"></u-icon>
							您有{{ remind }}条新消息
						</view>
						<cheer :cheerList="cheerList" :user="user" @jumpDynamicInfo="dynamicInfo"></cheer>

						<u-loadmore
							:status="loadStatus[load]"
							bgColor="#f2f2f2"
							:load-text="loadText"
							@loadmore="cheerReachBottom"
						></u-loadmore>
					</scroll-view>
				</swiper-item>
				<!-- 撕逼墙 -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="anonymousReachBottom">
						<view class="bgship"></view>

						<anonymous :anonymousList="anonymousList" :user="user" @jumpDynamicInfo="dynamicInfo"></anonymous>

						<u-loadmore
							:status="loadStatus[load]"
							bgColor="#f2f2f2"
							:load-text="loadText"
							@loadmore="anonymousReachBottom"
						></u-loadmore>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
import anonymous from '../../components/ido-anonymous/anonymous.vue';
import cheer from '../../components/ido-cheer/cheer.vue';
import ask from '../../components/ido-ask/ask.vue';
import { parseTime, getNowTime } from '../../utils/nowTime.js';
export default {
	components: { anonymous, cheer, ask },
	data() {
		return {
			user: {},
			thumbnum: 10,
			thumbStatu: [], // 加油站的点赞数组
			splitThumbStatu: [], // 撕逼墙的点赞数组
			showInput: false,
			showSplitInput: false,
			inputValue: '',
			type: 'text',
			focus: false,
			remind: 0,
			bannerList: [
				{
					image: '/static/img/bgship.e2754ded.jpg',
					title: ''
				},
				{
					image: '/static/img/bgship.e2754ded.jpg',
					title: ''
				},
				{
					image: '/static/img/bgship.e2754ded.jpg',
					title: ''
				}
			],
			throttleTime: [0, 0, 0],
			// 问大家的数据数组
			askList: [],
			// 加油站的数据数组
			cheerList: [],
			// 撕逼墙的数据数组
			anonymousList: [],
			list: [
				{
					name: '问大家'
				},
				{
					name: '加油站'
				},
				{
					name: '撕逼墙'
				}
			],
			current: 1,
			swiperCurrent: 1,
			tabsHeight: 0,
			dx: 0,
			loadStatus: ['loadmore', 'loading', 'nomore'],
			load: 0,
			loadText: {
				loadmore: '轻轻上拉或点击',
				loading: '努力加载中',
				nomore: '实在没有了'
			}
			// throttleTime:new Date().getTime()
		};
	},
	async onLoad() {
		this.user = JSON.parse(JSON.stringify(this.$store.getters.getStorageUser));
		console.log('user:', this.user);
		let cheerList = await this.$u.api.getCheerMoment(1, 5);
		cheerList = cheerList.rows;
		console.log('cheer', cheerList);
		this.addPrev(cheerList);
		this.cheerList = cheerList;

		let anonymousList = await this.$u.api.getAnonymousMoment(1, 5);
		anonymousList = anonymousList.rows;
		console.log('anony', anonymousList);
		this.addPrev(anonymousList);
		this.anonymousList = anonymousList;

		let banner = await this.$u.api.topicImage();
		console.log('banner:', banner);
		if (banner.data.length > 0) {
			for (let i = 0; i < banner.data.length; i++) {
				this.bannerList[i].image = banner.data[i].topicImg1Url;
			}
		}

		let remindNum = await this.$u.api.messageRemind();
		this.remind = remindNum.data.toString();
		if (remindNum.data > 0) {
			uni.setTabBarBadge({
				index: 1,
				text: this.remind
			});
		}

		console.log('remind', remindNum, this.remind);
	},
	onShow() {
		// 监听emit传来的发布数据
		uni.$on('publish', payload => {
			let nowTime = new Date().getTime();
			console.log('throllte', this.throttleTime);
			if (nowTime - this.throttleTime[2] > 2000) {
				this.throttleTime[2] = nowTime;
				console.log('pay:', payload);
				if (payload == 1) {
					this.patchCheerList();
				} else if (payload == 2) {
					this.patchAnonymousList();
				}
			}
		});
	},
	async onPullDownRefresh() {
		console.log('refresh of top swiperCurrent:', this.swiperCurrent);
		if (this.swiperCurrent == 1) {
			this.patchCheerList();
		} else if (this.swiperCurrent == 2) {
			this.patchAnonymousList();
		}
		setTimeout(function() {
			uni.stopPullDownRefresh();
			uni.showToast({
				title: '刷新完成',
				icon: 'none',
				duration: 800
			});
		}, 1000);
	},
	methods: {
		// 感觉下面这两个可以加一个节流，就是连续触发，但在n秒之内只会执行一次
		async cheerReachBottom() {
			console.log('refresh of cheer bottom');
			let pretime = this.throttleTime[0];
			this.throttleTime[0] = new Date();
			if (this.throttleTime[0] - pretime < 1000) {
				uni.showToast({
					title: '请慢点刷新',
					icon: 'none',
					duration: 500
				});
			}
			this.load = 1;

			let itemLen = this.cheerList.length;
			let remainder = itemLen % 5;
			let pageNum = Math.ceil(itemLen / 5) > 1 ? Math.ceil(itemLen / 5) : 1;
			if (remainder == 0) {
				pageNum++;
			}
			let cheerList = await this.$u.api.getCheerMoment(pageNum, 5);
			cheerList = cheerList.rows;
			console.log('reach bottom cheer', cheerList);
			this.addPrev(cheerList);
			let patchNum = -1; // 这个值表示请求来的数据和目前的数据最后的一个 id相配时的在请求来的数据中的位置
			for (let i = 0; i < cheerList.length; i++) {
				if (cheerList[i].id == this.cheerList[itemLen - 1].id) {
					if (cheerList[i].id == 1) {
						this.load = 0;
						return;
					}
					patchNum = i;
				}
			}
			if (remainder == 0 || patchNum == -1) {
				this.cheerList = this.cheerList.concat(cheerList);
				// console.log('concat',this.cheerList)
			} else {
				for (++patchNum; patchNum < cheerList.length; patchNum++) {
					this.cheerList.push(cheerList[patchNum]);
				}
			}
			this.cheerList.forEach(item => {
				console.log('id:', item.id);
			});
			this.load = 0;
		},
		async anonymousReachBottom() {
			console.log('refresh of split bottom');
			let pretime = this.throttleTime[1];
			this.throttleTime[1] = new Date();
			if (this.throttleTime[1] - pretime < 2000) {
				uni.showToast({
					title: '请慢点刷新',
					icon: 'none',
					duration: 500
				});
				return false;
			}
			this.load = 1;

			let itemLen = this.anonymousList.length;
			let remainder = itemLen % 5;
			let pageNum = Math.ceil(itemLen / 5) > 1 ? Math.ceil(itemLen / 5) : 1;
			if (remainder == 0) {
				pageNum++;
			}
			let anonymousList = await this.$u.api.getAnonymousMoment(pageNum, 5);
			anonymousList = anonymousList.rows;
			console.log(anonymousList);
			this.addPrev(anonymousList);
			let patchNum = -1; // 这个值表示请求来的数据和目前的数据最后的一个 id相配时的在请求来的数据中的位置
			for (let i = 0; i < anonymousList.length; i++) {
				if (anonymousList[i].id == this.anonymousList[itemLen - 1].id) {
					if (anonymousList[i].id == 1) {
						this.load = 0;
						return;
					}
					patchNum = i;
				}
			}
			if (remainder == 0 || patchNum == -1) {
				this.anonymousList = this.anonymousList.concat(anonymousList);
				console.log('concat', this.anonymousList);
			} else {
				for (++patchNum; patchNum < anonymousList.length; patchNum++) {
					this.anonymousList.push(anonymousList[patchNum]);
				}
			}
			this.load = 0;
		},
		thumbClick(item, index) {},
		myMoment() {
			uni.navigateTo({
				url: `./myMoment?remind=${this.remind}`
			});
		},
		// tab栏切换
		change(index) {
			this.swiperCurrent = index;
		},
		transition({ detail: { dx } }) {
			this.$refs.tabs.setDx(dx);
		},
		animationfinish({ detail: { current } }) {
			this.$refs.tabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
		},
		remindInterface() {
			let that = this;
			uni.navigateTo({
				url: './remind',
				success() {
					that.remind = 0;
					uni.removeTabBarBadge({
						index: 1
					});
				}
			});
		},
		// 对这些相对链接添加前缀
		addPrev(dataList) {
			dataList.forEach(item => {
				if (item.time) {
					item.time = parseTime(item.time);
				}

				if (item.reportAvatar && !item.reportAvatar.includes('http')) {
					item.reportAvatar = this.$store.state.projectIp + item.reportAvatar;
				}
				if (item.picture1 && !item.picture1.includes('http')) {
					item.picture1 = this.$store.state.projectIp + item.picture1;
				}
			});
		},

		async patchCheerList(pageSize = 5) {
			let cheerList = await this.$u.api.getCheerMoment(1, pageSize);
			console.log('cl', cheerList);
			cheerList = cheerList.rows;
			if (this.cheerList[0].id == cheerList[0].id) {
				uni.showToast({
					title: '暂无新动态',
					icon: 'none',
					duration: 1000
				});
				return;
			}
			let patchNum = -1; // 这个值表示请求来的数据和目前的数据最新的一个 id相配时的在请求来的数据中的位置
			for (let i = 0; i < cheerList.length; i++) {
				if (cheerList[i].id == this.cheerList[0].id) {
					patchNum = i;
				}
			}
			this.addPrev(cheerList);
			if (patchNum != -1) {
				for (--patchNum; patchNum >= 0; patchNum--) {
					this.cheerList.unshift(cheerList[patchNum]);
				}
			} else if (pageSize >= 15) {
				cheerList.forEach(item => {
					this.cheerList.unshift(item);
				});
				return;
			} else {
				this.patchCheerList(15);
			}
			return;
		},
		async patchAnonymousList(pageSize = 5) {
			let anonymousList = await this.$u.api.getAnonymousMoment(1, 5);
			console.log('al', anonymousList);
			anonymousList = anonymousList.rows;
			if (this.anonymousList[0].id == anonymousList[0].id) {
				uni.showToast({
					title: '暂无新动态',
					icon: 'none',
					duration: 1000
				});
				return;
			}
			let patchNum = -1; // 这个值表示请求来的数据和目前的数据最新的一个 id相配时的在请求来的数据中的位置
			for (let i = 0; i < anonymousList.length; i++) {
				if (anonymousList[i].id == this.anonymousList[0].id) {
					patchNum = i;
				}
			}
			this.addPrev(anonymousList);
			if (patchNum != -1) {
				for (--patchNum; patchNum >= 0; patchNum--) {
					this.anonymousList.unshift(anonymousList[patchNum]);
				}
			} else if (pageSize >= 15) {
				anonymousList.forEach(item => {
					this.anonymousList.unshift(item);
				});
				return;
			} else {
				this.patchAnonymousList(15);
			}
			return;
		},
		dynamicInfo(payload) {
			let type = 'cheer';
			uni.navigateTo({
				url: `../../pages/internship/comment?dynamicId=${payload.dynamicId}&type=${payload.type}`
			});
		}
	}
};
</script>

<style>
/* #ifndef H5 */
page {
	height: 100%;
	background-color: #f2f2f2;
}

/* #endif */
</style>

<style lang="scss" scoped>
.bgship {
	height: 400rpx;
	background-image: url(../../static/img/bgship.jpg);
	background-size: 100% 100%;
	.avatar-ship {
		position: absolute;
		right: 2vw;
		top: 25vh;
	}
	.icon-ship {
		position: absolute;
		right: 20vw;
		top: 29vh;
	}
}
.remind-message {
	background-color: #fff;
	margin: 2vh 2vw;
	padding: 10rpx;
	border-radius: 15rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.page-box {
	width: 96vw;
	margin: 2vh 2vw;
	padding: 10rpx;
	background-color: #fff;
	border-radius: 20rpx;

	.info-head {
		// margin: 10rpx;
		// border-bottom: solid 1px #f9eeff;
		display: flex;
		align-items: center;
		.name-time {
			display: flex;
			flex-direction: column;
			margin-left: 20rpx;
			.name {
			}
			.info-time {
				font-size: 0.8em;
			}
		}
	}

	.info {
		// background-color: rgba(255, 253, 254, 0.8);
		.info-text {
			margin: 10rpx 0;
		}
		// border-bottom: solid 1px #f9eeff;
	}

	.info-bottom {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin: 15rpx 20rpx;

		.thumb {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 10rpx;
		}

		.thumbnum {
			margin: 0 0 0 5rpx;
			font-size: 5rpx;
		}
	}

	.comment {
		// border: solid 1px #007AFF;
		margin: 10rpx 0;
		.com-name {
			color: #295c9d;
			margin: 0 10rpx 0 0;
		}
	}
	.comment-input {
	}
}

.thumb-active {
	color: #007aff;
}

.wrap {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--window-top));
	width: 100%;
}

.swiper-box {
	flex: 1;
}

.swiper-item {
	height: 100%;
}
</style>
